<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="prefetch" href="img/Group 6.png" />
  <link rel="prefetch" href="img/Group 7.png" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body, .bg {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .bg {
      background: url('img/Group 9.png');
      background-position: center;
      background-size: cover;
      position: relative;
    }
    .center {
      position: absolute;
      width: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: scaleIn 0.2s ease forwards;
    }
    .start {
      position: absolute;
      width: 50%;
      top: 50%;
      left: 47%;
      transform: translate(-50%, 22vw);
    }
    .start2 {
      position: absolute;
      display: block;
      width: 10%;
      height: 40vw;
      top: 50%;
      left: 15%;
      transform: translate(-50%, 0);
    }
    #slots {
      position: absolute;
      width: 46%;
      height: 49vw;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -46vw);
    }

    .result {
      position: absolute;
      width: 85%;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .retry {
      position: absolute;
      width: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 18vw);
    }

    .hidden {
      display: none;
    }

    .fly1 {
      position: absolute;
      width: 15vw;
      top: 50%;
      left: 42.5vw;
      transform-origin: 7.5vw 0;
      animation: round1 13s linear 0s infinite;
    }
    @keyframes round1 {
      from {transform: rotateZ(-50deg) translate(85vw, -50%);}
      to {transform: rotateZ(-410deg) translate(85vw, -50%);}
    }
    @keyframes round12 {
      from {transform: rotateZ(-50deg) translate(65vw, -50%);}
      to {transform: rotateZ(-410deg) translate(65vw, -50%);}
    }

    .fly2 {
      position: absolute;
      width: 20vw;
      top: 50%;
      left: 40vw;
      transform-origin: 10vw 0;
      animation: round2 13s linear 0s infinite;
    }
    @keyframes round2 {
      from {transform: rotateZ(130deg) translate(85vw, -50%);}
      to {transform: rotateZ(-230deg) translate(85vw, -50%);}
    }
    @keyframes round22 {
      from {transform: rotateZ(130deg) translate(65vw, -50%);}
      to {transform: rotateZ(-230deg) translate(65vw, -50%);}
    }

    @keyframes scaleIn {
      from {transform: translate(-50%, -50%) scale(0);}
      to {transform: translate(-50%, -50%) scale(1);}
    }
    @keyframes scaleOut {
      from {transform: translate(-50%, -50%) scale(1);}
      to {transform: translate(-50%, -50%) scale(0);}
    }
  </style>
</head>
<body>
  <div class="bg">
    <img class="fly1" src="img/Group1.png" />
    <img class="fly2" src="img/Group2.png" />
    <img class="center" src="img/Group 0.png" />
    <img class="start" src="img/Group 4.png" />
    <div class="start2"></div>
    <canvas id="slots"></canvas>
  </div>
  <div class="hidden">
    <img class="result" src="img/Group 6.png" />
    <img class="retry hidden" src="img/Group 5.png" />
  </div>
  <script>
    var canvas = document.getElementById("slots");
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;

    window.config = {
      left: 0,
      top: (canvas.height - canvas.width) / 2,
      width: canvas.width,
      height: canvas.height
    };
  </script>
  <script src="slots.js?1"></script>
  <script>
    init();

    var isStart = false;

    var center = document.getElementsByClassName('center')[0];
    var start = document.getElementsByClassName('start')[0];
    var start2 = document.getElementsByClassName('start2')[0];
    var slots = document.getElementById('slots');
    var result2 = document.getElementsByClassName('result')[0];
    var fly1 = document.getElementsByClassName('fly1')[0];
    var fly2 = document.getElementsByClassName('fly2')[0];
    var retry = document.getElementsByClassName('retry')[0];

    start2.onclick = start.onclick = function() {
      if (isStart) return;
      isStart = true;
      spin(1);
    };

    window.onWin = function() {
      start.classList.add('hidden');
      slots.classList.add('hidden');

      fly1.style.animation = 'round12 13s linear 0s infinite';
      fly2.style.animation = 'round22 13s linear 0s infinite';
      center.style.animation = 'scaleOut 0.2s ease forwards';
      result2.style.animation = 'scaleIn 0.2s ease forwards';

      result2.src = "img/Group 6.png";
      result2.parentElement.classList.remove('hidden');

      setTimeout(function() {
        retry.classList.remove('hidden');
      }, 200);
    };
    window.onLose = function() {
      start.classList.add('hidden');
      slots.classList.add('hidden');

      fly1.style.animation = 'round12 13s linear 0s infinite';
      fly2.style.animation = 'round22 13s linear 0s infinite';
      center.style.animation = 'scaleOut 0.2s ease forwards';
      result2.style.animation = 'scaleIn 0.2s ease forwards';

      result2.src = "img/Group 7.png";
      result2.parentElement.classList.remove('hidden');

      setTimeout(function() {
        retry.classList.remove('hidden');
      }, 200);
    };

    retry.onclick = function() {
      start.classList.remove('hidden');
      slots.classList.remove('hidden');

      fly1.style.animation = 'round1 13s linear 0s infinite';
      fly2.style.animation = 'round2 13s linear 0s infinite';
      center.style.animation = 'scaleIn 0.2s ease forwards';
      result2.style.animation = 'scaleOut 0.2s ease forwards';

      result2.parentElement.classList.add('hidden');
      retry.classList.add('hidden');
      isStart = false;
    }

  </script>
</body>
</html>